<template lang="html">
  <section class="components-common_tablist" style="z-index:999">
    <ul class="tabList">
      <router-link
        tag="li"
        :class="{ active: curIndex === index }"
        class="tabItem"
        v-for="(item, index) in list"
        :key="item.iconName"
        :to="item.path"
      >
        <i :class="`ic-${item.iconName}`"></i>
        <span class="tabItem-text">{{item.text}}</span>
      </router-link>
    </ul>
  </section>
</template>

<script>
export default {
  data(){
    return {
      curIndex: 1,
      list: [
        {
          iconName: 'court',
          text: 'court',
          path: '/court'
        },
        {
          iconName: 'course',
          text: 'appointment',
          path: '/'
        },
        {
          iconName: 'personal',
          text: 'home',
          path: '/personal'
        },
      ],
    }
  },
  created(){
    this.routeToIndex(this.$route.name)
  },
  watch: {
    '$route'(to, from){
      this.routeToIndex(to.name)
    }
  },
  methods: {
    routeToIndex(name){
      switch (name) {
        case "main-index":
          this.curIndex = 1
          break;
        case "main-court":
          this.curIndex = 0
          break;
        case "main-personal":
          this.curIndex = 2
          break;
        default:
          this.curIndex = 1
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../css/config";
.components-common_tablist{
  position: fixed;
  z-index: 999;
  bottom: 0;
  left: 0;
  width: 100%;
  height: $tablist-height;
  background-color: #1b1a1f;
  .tabList{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
    .tabItem{
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      color: #a6a6a6;
      box-sizing: border-box;
      &.active{
        color: #fe4904;
      }
      i{
        display: inline-block;
        font-size: 43px;
      }
      .tabItem-text{
        display: inline-block;
        font-size: 18px;
        letter-spacing: 1Px;
      }
    }
  }
}
</style>
